<template>
  <div class="bg-white p-3 rounded-lg shadow">
    <h3 class="text-md font-medium mb-2">裁剪设置</h3>
    
    <div class="grid grid-cols-2 gap-2">
      <!-- 左边距 -->
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">
          左边距: {{ store.cropParams.left }}
        </label>
        <input type="range" v-model.number="store.cropParams.left" 
               :min="0" :max="maxLeft" class="w-full" />
      </div>
      
      <!-- 上边距 -->
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">
          上边距: {{ store.cropParams.top }}
        </label>
        <input type="range" v-model.number="store.cropParams.top" 
               :min="0" :max="maxTop" class="w-full" />
      </div>
      
      <!-- 宽度 -->
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">
          宽度: {{ store.cropParams.width }}
        </label>
        <input type="range" v-model.number="store.cropParams.width" 
               :min="1" :max="maxWidth" class="w-full" />
      </div>
      
      <!-- 高度 -->
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">
          高度: {{ store.cropParams.height }}
        </label>
        <input type="range" v-model.number="store.cropParams.height" 
               :min="1" :max="maxHeight" class="w-full" />
      </div>
    </div>
    
    <!-- 重置按钮 -->
    <div class="mt-2">
      <button @click="resetCrop" class="bg-gray-200 hover:bg-gray-300 px-3 py-1 rounded text-sm">
        重置裁剪
      </button>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useVideoStore } from '../stores/videoStore';

// 使用 Pinia store
const store = useVideoStore();

// 计算属性
const maxLeft = computed(() => {
  return Math.max(0, store.videoDimensions.width - store.cropParams.width);
});

const maxTop = computed(() => {
  return Math.max(0, store.videoDimensions.height - store.cropParams.height);
});

const maxWidth = computed(() => {
  return Math.max(1, store.videoDimensions.width - store.cropParams.left);
});

const maxHeight = computed(() => {
  return Math.max(1, store.videoDimensions.height - store.cropParams.top);
});

// 方法
const resetCrop = () => {
  if (store.videoDimensions.width > 0) {
    store.cropParams = {
      left: 0,
      top: 0,
      width: store.videoDimensions.width,
      height: store.videoDimensions.height
    };
  }
};
</script>